<template>
  <div class="app-container assignment-list">
    <div class="org-list-opt">
      <a-space>
        <a-button type="primary" @click="handleAdd">
          <template #icon>
            <icon-plus />
          </template>
          新建
        </a-button>
      </a-space>
    </div>
    <a-table :data="listData" :pagination="false" :stripe="true" :scroll="{ y: '100%' }">
      <template #columns>
        <a-table-column title="序号" :width="64">
          <template #cell="cell">{{ cell.rowIndex + 1 }}</template>
        </a-table-column>
        <a-table-column title="被分配人" :width="100" tooltip ellipsis data-index="assignRoleName" />
        <a-table-column title="是否允许跨组织分配" :width="150" tooltip ellipsis>
          <template #cell="{ record }">
            <span>{{ record.canAllDept === 1 ? "是" : "否" }}</span>
          </template>
        </a-table-column>
        <a-table-column title="分配人" :width="150" tooltip ellipsis data-index="assignedRoleNamestr" />
        <a-table-column title="操作" :width="200" align="center">
          <template #cell="{ record }">
            <a-button type="text" class="user-list_btn" @click="handelEdit(record)">编辑</a-button>
            <a-button type="text" class="user-list_btn" @click="handleDelete(record)">删除</a-button>
          </template>
        </a-table-column>
      </template>
    </a-table>

    <!--  删除 start  -->
    <a-modal
      :visible="isShowDelModal"
      @ok="handleDelOk"
      @cancel="handleDelCancel"
      okText="确定"
      cancelText="取消"
      width="400px"
      :mask-closable="false"
      unmountOnClose
      :closable="false"
    >
      <div class="modal-message">
        <div class="del-name">确定要删除所选数据吗?</div>
      </div>
    </a-modal>
    <!--  删除 end  -->

    <a-modal
      :visible="isAddEditConfig"
      @ok="handleAddEditOrgOk"
      @cancel="handleAddEditOrgCancel"
      okText="确定"
      cancelText="取消"
      width="474px"
      unmount-on-close
      :mask-closable="false"
      :closable="false"
    >
      <div class="modal-set-org">
        <div class="modal-title">
          <CustomTitle :title="isAdd ? '新增' : '编辑'" />
        </div>
        <a-spin v-if="isOptLoading"></a-spin>
        <a-form v-else :model="formData" :rules="formRules" ref="configFormRef" label-align="left">
          <a-form-item field="assignRoleId" label="被分配人">
            <a-select placeholder="请选择被分配人" v-model="formData.assignRoleId" :filter-option="false">
              <a-option v-for="item in roleList" :value="item.roleId">{{ item.roleName }}</a-option>
            </a-select>
          </a-form-item>
          <a-form-item field="assignedRoleIds" label="分配人">
            <a-select placeholder="请选择分配人" v-model="formData.assignedRoleIds" multiple :filter-option="false">
              <a-option v-for="item in roleList" :value="item.roleId">{{ item.roleName }}</a-option>
            </a-select>
          </a-form-item>
          <div class="custon-form-item">
            <div class="form-lable">
              <strong class="form-start"
                ><svg fill="currentColor" viewBox="0 0 1024 1024" width="1em" height="1em">
                  <path
                    d="M583.338667 17.066667c18.773333 0 34.133333 15.36 34.133333 34.133333v349.013333l313.344-101.888a34.133333 34.133333 0 0 1 43.008 22.016l42.154667 129.706667a34.133333 34.133333 0 0 1-21.845334 43.178667l-315.733333 102.4 208.896 287.744a34.133333 34.133333 0 0 1-7.509333 47.786666l-110.421334 80.213334a34.133333 34.133333 0 0 1-47.786666-7.509334L505.685333 706.218667 288.426667 1005.226667a34.133333 34.133333 0 0 1-47.786667 7.509333l-110.421333-80.213333a34.133333 34.133333 0 0 1-7.509334-47.786667l214.186667-295.253333L29.013333 489.813333a34.133333 34.133333 0 0 1-22.016-43.008l42.154667-129.877333a34.133333 34.133333 0 0 1 43.008-22.016l320.512 104.106667L412.672 51.2c0-18.773333 15.36-34.133333 34.133333-34.133333h136.533334z"
                  ></path></svg
              ></strong>
              <span>是否允许跨组织分配</span>
            </div>
            <a-radio-group v-model="formData.canAllDept">
              <a-radio :value="1">是</a-radio>
              <a-radio :value="0">否</a-radio>
            </a-radio-group>
          </div>
        </a-form>
      </div>
    </a-modal>
  </div>
</template>

<script setup lang="ts">
import _ from "lodash";
import { Message } from "@arco-design/web-vue";
import { allocationConfigList, delAllocationConfig, saveAllocationConfig, getRoleList, allocationConfigDetail } from "@/apis";
import type { AssignmentConfigData, AssignmentData, RoleList } from "@/apis";

const { proxy } = getCurrentInstance();

const listData = ref<any[]>([]);
const getAllocationConfigList = async () => {
  const { data = [] } = await allocationConfigList();
  listData.value = data.map((item: AssignmentData) => {
    return {
      ...item,
      assignedRoleNamestr: item.assignedRoleNames?.join(",") || ""
    };
  });
};

// 新增/编辑
const isAddEditConfig = ref(false);
const isAdd = ref(true);
const isOptLoading = ref(false);
const formData = ref<AssignmentConfigData>({
  assignId: "",
  assignRoleId: "",
  assignedRoleIds: [],
  canAllDept: 0
});
const formRules = {
  assignRoleId: [{ required: true, message: "请选择被分配人" }],
  assignedRoleIds: [{ required: true, message: "请选择分配人" }]
};
const roleList = ref<Array<RoleList>>([]);
const getRoleListData = async () => {
  const { data = [] } = await getRoleList();
  roleList.value = data;
};
const getAllocationConfigDetail = async (assignId: string | number) => {
  try {
    isOptLoading.value = true;
    const { data = {} } = await allocationConfigDetail(assignId);
    const { data: roleData = [] } = await getRoleList();
    roleList.value = roleData;
    formData.value = data;
    isOptLoading.value = false;
  } catch (err) {
    isOptLoading.value = false;
  }
};
const postAddEditOrg = async () => {
  const valid = await proxy.$refs.configFormRef?.validate();
  if (valid) return;
  await saveAllocationConfig(formData.value);
  resetForm();
  getAllocationConfigList();
  Message.success(`${isAdd.value ? "新增" : "编辑"}成功`);
};
const handleAdd = () => {
  isAddEditConfig.value = true;
  getRoleListData();
};
const handelEdit = (data: AssignmentData) => {
  isAdd.value = false;
  isAddEditConfig.value = true;
  getAllocationConfigDetail(data.assignId);
};
const handleAddEditOrgOk = _.debounce(postAddEditOrg, 500);
const handleAddEditOrgCancel = () => {
  resetForm();
};
const resetForm = () => {
  formData.value = {
    assignId: "",
    assignRoleId: "",
    assignedRoleIds: [],
    canAllDept: 0
  };
  proxy.$refs.configFormRef?.clearValidate();
  isAddEditConfig.value = false;
};

const isShowDelModal = ref(false);
const delAssignId = ref<string | number>("");
const handleDelete = (data: AssignmentData) => {
  isShowDelModal.value = true;
  delAssignId.value = data.assignId;
};
const handleDelOk = () => {
  delAllocationConfig(delAssignId.value).then(() => {
    Message.success("删除成功");
    isShowDelModal.value = false;
    getAllocationConfigList();
  });
};
const handleDelCancel = () => {
  isShowDelModal.value = false;
};

getAllocationConfigList();
</script>

<style scoped lang="scss">
.assignment-list {
  @include flex;
  flex-direction: column;
  height: calc(100% - 40px);
  background-color: #fff;
  box-shadow: 4px 5px 16px 0 rgba(4, 19, 74, 0.04);
  border-radius: 10px;
  .org-list-opt {
    @include flex-between;
    margin-bottom: 20px;
  }
  :deep(.arco-table) {
    flex: 1;
    overflow-y: auto;
  }
}
.modal-title {
  margin-bottom: 24px;
}

.modal-message {
  @include flex-align;
  flex-direction: column;
  width: 100%;
  .del-name {
    @include flex-inline-flex;
    width: 200px;
    height: 60px;
    margin: 20px auto 10px;
  }
  .del-tip {
    margin-bottom: 23px;
  }
}

.custon-form-item {
  @include flex-between;
  .form-lable {
    .form-start {
      color: rgb(245, 63, 63);
      font-size: 12px;
      line-height: 1;
      svg {
        transform: scale(0.5);
      }
    }
    span {
      max-width: 100%;
      color: #5c5c5c;
      font-size: 14px;
      white-space: normal;
    }
  }
}
:deep(.arco-spin) {
  width: 100%;
}
:deep(.arco-spin-icon) {
  @include flex-center;
}

:deep(.arco-table-header) th {
  background-color: #f2f6fc !important;
}
:deep(.arco-table-body) tr:nth-child(2n) td {
  background-color: #f5f7fa !important;
}
</style>
